<!--
 * @Author: your name
 * @Date: 2022-04-27 09:35:26
 * @LastEditTime: 2024-03-14 14:45:05
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jzjy\src\views\ActiveCenter\index.vue
-->
<template>
  <div id="container">
    <div class="top">
      <div class="bread">
        <span>当前位置：</span>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/active' }"
            >活动中心</el-breadcrumb-item
          >
          <el-breadcrumb-item
            >《红楼梦》与《乡土中国》线上协同教研活动</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
    </div>
    <div class="content">
      <div class="top taps">
        <span></span>
        <h3>活动直播管理</h3>
      </div>
      <div class="header">
        <div class="taps">
          <div class="tap" :class="{ choseTap: type == 1 }" @click="choseUser">
            <h3>用户管理</h3>
            <span></span>
          </div>
          <div class="tap" :class="{ choseTap: type == 2 }" @click="chosePl">
            <h3>评论审核</h3>
            <span></span>
          </div>
        </div>
        <el-input
          v-model.trim="keyword"
          placeholder="请输入关键词搜索"
          prefix-icon="el-icon-search"
          @keyup.enter.native="search"
        ></el-input>
      </div>
      <div class="table" v-if="type == 1">
        <el-table :data="tableData" style="width: 800px" stripe>
          <el-table-column type="index" label="编号" width="180">
          </el-table-column>
          <el-table-column label="昵称" width="280">
            <template slot-scope="scope">
              <div class="username">
                <span>{{ scope.row.title }}</span>
                <span
                  v-if="scope.row.is_gly == 1"
                  class="gly"
                  style="color: #08a579; fontsize: 12px"
                >
                  [管理员]</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <div class="dosome">
                <span
                  @click="
                    getlahei(
                      scope.row.account_id,
                      scope.row.title,
                      scope.row.is_gly
                    )
                  "
                  :class="{ clickThis: false }"
                  v-if="scope.row.lh_status == 0"
                >
                  拉黑</span
                >
                <span
                  @click="
                    cellahei(
                      scope.row.account_id,
                      scope.row.title,
                      scope.row.is_gly
                    )
                  "
                  :class="{ clickThis: true }"
                  v-if="scope.row.lh_status == 1"
                >
                  拉黑</span
                >
                <span
                  @click="
                    nospeak(
                      scope.row.account_id,
                      scope.row.title,
                      scope.row.is_gly
                    )
                  "
                  :class="{ clickThis: false }"
                  v-if="scope.row.jy_status == 0"
                >
                  禁言</span
                >
                <span
                  @click="
                    canspeak(
                      scope.row.account_id,
                      scope.row.title,
                      scope.row.is_gly
                    )
                  "
                  :class="{ clickThis: true }"
                  v-if="scope.row.jy_status == 1"
                >
                  禁言</span
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page1">
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="currentPage"
            background
            layout="total,  prev, pager, next, jumper"
            :total="retCounts1"
          >
          </el-pagination>
        </div>
      </div>
      <div class="comment" v-if="type == 2">
        <div class="dowhat">
          <el-checkbox v-model="checkAll" @change="allChose"></el-checkbox>
          <span @click="allSc"> <i class="el-icon-delete"></i>批量删除 </span>
          <span @click="allTg" v-if="msgsh_status == 1">
            <i class="el-icon-folder-checked"></i>批量通过
          </span>
          <span @click="allYc" v-if="msgsh_status == 1">
            <i class="el-icon-folder-delete"></i>批量隐藏
          </span>
        </div>
        <div class="plLists">
          <div class="tableHeader">
            <h4>编号</h4>
            <span>评论内容</span>
            <p>操作</p>
          </div>
          <el-checkbox-group @change="valChanged" v-model="valArr">
            <el-checkbox v-for="item in msgLists" :label="item" :key="item.id">
              <h4>{{ item.id }}</h4>
              <div class="msg" style="textalign: center; margin: 0 0 0 50px">
                <el-image
                  style="width: 100px; height: 100px; objectfit: cover"
                  :src="JSON.parse(item.msg_json).picUrl"
                  v-show="JSON.parse(item.msg_json).picUrl"
                  :preview-src-list="Array(JSON.parse(item.msg_json).picUrl)"
                >
                </el-image>
                <p>{{ JSON.parse(item.msg_json).contents }}</p>
              </div>
              <div class="doSome" v-if="item.sh_status == 1">
                <span @click.prevent="tgXx(item.id)">通过</span>
                <span style="marginleft: 10px" @click.prevent="ycXx(item.id)"
                  >隐藏</span
                >
              </div>
              <div class="status" v-if="item.sh_status != 1">
                <span v-if="item.sh_status == 2">已通过</span>
                <span v-if="item.sh_status == 3">已隐藏</span>
              </div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 分页 -->
        <div class="page1">
          <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="currentPage"
            background
            layout="total, prev, pager, next, jumper"
            :total="retCounts2"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { chatinfo, list_chatuser, chatmsglists } from "../../api/http";
export default {
  data() {
    return {
      active_id: 0, //活动id
      chat_url: "", //连接地址
      socket: null, //socket建立的连接
      chat_id: 0, //直播间聊天室id
      jy_status: "", //静言状态
      msgsh_status: "", //聊天室信息是否需要审核
      online_limit: "", //心跳包
      userId: 0, //本人id
      title: "", //昵称
      type: 1, //用户管理1或评论审核2
      retCounts1: 0, //用户数据总数
      retCounts2: 0, //评论数据总数
      dfArr: [], //拉黑组
      nsArr: [], //禁言组
      currentPage: 1, //分页
      page: 1, //用户列表分页用
      page_size: 10, //用户列表分页用
      page2: 1, //评论列表分页用
      page_size2: 10, //评论列表分页用
      flag: false,
      keyword: "", //搜索关键词

      tableData: [], //表格数据
      msgLists: [],
      valArr: [], //选中评论组
      idArr: [], //全选的消息id数组
      checkAll: false,
    };
  },
  created() {
    console.log(this.$route.query, "传过来的query信息");
    this.active_id = this.$route.query.active_id;
    this.type = this.$route.query.type;
  },
  mounted() {
    //获取聊天室信息
    chatinfo({
      md5key: localStorage.getItem("md5key"),
      activity_id: this.active_id,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "聊天室信息");
        const data = res.retRes;
        this.chat_id = data.chat_id;
        this.chat_url = data.chat_url;
        // this.mytxFile = data.file_url;
        this.userId = data.id;
        this.msgsh_status = data.msgsh_status;
        // this.is_gly = data.is_gly;
        // this.jy_statud_my = data.jy_statud_my;
        this.jy_status = data.jy_status;
        this.online_limit = data.online_limit;
        this.initWebSocket(); //初始化websocket
        //获取直播间用户列表
        list_chatuser({
          md5key: localStorage.getItem("md5key"),
          chat_id: this.chat_id,
          page: 1,
          page_size: 10,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "直播间用户列表");
            this.tableData = res.retRes;
            this.retCounts1 = res.retCounts;
          } else {
            console.log("获取用户列表失败");
          }
        });
        //聊天室消息列表
        chatmsglists({
          md5key: localStorage.getItem("md5key"),
          chat_id: this.chat_id,
          page: this.page2,
          page_size: this.page_size2,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "评论列表");
            this.msgLists = res.retRes;
            this.retCounts2 = res.retCounts;
          }
        });
        //按返回的心跳包时间间隔重新连接
        setInterval(() => {
          if (this.socket.readyState != WebSocket.OPEN) {
            this.socket = new WebSocket(this.path);
            console.log(this.socket.readyState, "心跳包心跳包心跳包");
          }
          const data_arr = {
            chat_id: this.chat_id,
            type: "online",
            from_id: this.userId,
            title: this.mynickname,
            file_url: this.mytxFile,
          };
          const msg_data = {};
          data_arr["msg_json"] = JSON.stringify(msg_data);
          const data_str = JSON.stringify(data_arr);
          this.socket.send(data_str);
          console.log("根据心跳包保持登录聊天室状态");
        }, data.online_limit * 1000);
      }
    });
  },
  methods: {
    // 开启（初始化websocket）
    initWebSocket() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        (this.path = this.chat_url),
          // 实例化socket
          (this.socket = new WebSocket(this.path));
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.message;
        //监听socket断开连接消息
        this.socket.onclose = this.close;
      }
    },
    //建立连接
    open() {
      console.log(this.socket);
      const data_arr = {
        chat_id: this.chat_id,
        type: "init",
        from_id: this.userId,
        title: this.mynickname,
        file_url: this.mytxFile,
      };
      const msg_data = {
        value: "登录成功，连接到聊天室",
        mytxFile: this.mytxFile,
      };
      data_arr["msg_json"] = JSON.stringify(msg_data);
      const data_str = JSON.stringify(data_arr);
      // // 连接建立之后执行send方法发送数据
      this.socket.send(data_str);
      // console.log("socket连接成功--websocketOpen");
    },
    //搜索框搜索
    search() {
      console.log(this.type);
      if (this.type == 1) {
        //获取直播间用户列表
        list_chatuser({
          md5key: localStorage.getItem("md5key"),
          chat_id: this.chat_id,
          title: this.keyword,
          page: 1,
          page_size: 10,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "直播间用户列表");
            this.tableData = res.retRes;
            this.retCounts1 = res.retCounts;
            // this.keyword = "";
          } else {
            console.log("获取用户列表失败");
          }
        });
      } else {
        //聊天室消息列表
        chatmsglists({
          md5key: localStorage.getItem("md5key"),
          chat_id: this.chat_id,
          contents: this.keyword,
          page: 1,
          page_size: 10,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "评论列表");
            this.msgLists = res.retRes;
            this.retCounts2 = res.retCounts;
            // this.keyword = "";
          }
        });
      }
    },
    //选择用户管理
    choseUser() {
      this.type = 1;
    },
    //选择评论审核
    chosePl() {
      this.type = 2;
    },
    //禁言
    nospeak(id, title, is_gly) {
      console.log(id, title, is_gly);
      if (is_gly == 0) {
        this.nsArr.push(id);
        // console.log(this.nsArr.indexOf(id), 12);
        const data_arr = {
          chat_id: this.chat_id,
          type: "jy",
          from_id: this.userId,
          title: title,
        };
        const msg_data = {
          account_id: id,
          jy_status: 1,
          name: title,
          contents: "禁言",
        };
        data_arr["msg_json"] = JSON.stringify(msg_data);
        const data_str = JSON.stringify(data_arr);
        this.socket.send(data_str);
        setTimeout(() => {
          //获取直播间用户列表
          list_chatuser({
            md5key: localStorage.getItem("md5key"),
            chat_id: this.chat_id,
            titlel: this.title,
            page: this.page,
            page_size: this.page_size,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "直播间用户列表");
              this.tableData = res.retRes;
              this.retCounts1 = res.retCounts;
            } else {
              console.log("获取用户列表失败");
            }
          });
        }, 20);
      } else {
        this.$message({
          message: "不可对管理员操作",
          type: "warning",
        });
      }
    },
    //取消禁言
    canspeak(id, title, is_gly) {
      console.log(id, title, is_gly);
      if (is_gly == 0) {
        this.nsArr.splice(this.nsArr.indexOf(id), 1);
        // console.log(this.nsArr.indexOf(id), 12);
        const data_arr = {
          chat_id: this.chat_id,
          type: "jy",
          from_id: this.userId,
          title: title,
        };
        const msg_data = {
          account_id: id,
          jy_status: 0,
          name: title,
          contents: "取消禁言",
        };
        data_arr["msg_json"] = JSON.stringify(msg_data);
        const data_str = JSON.stringify(data_arr);
        this.socket.send(data_str);
        setTimeout(() => {
          //获取直播间用户列表
          list_chatuser({
            md5key: localStorage.getItem("md5key"),
            chat_id: this.chat_id,
            titlel: this.title,
            page: this.page,
            page_size: this.page_size,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "直播间用户列表");
              this.tableData = res.retRes;
              this.retCounts1 = res.retCounts;
            } else {
              console.log("获取用户列表失败");
            }
          });
        }, 20);
      } else {
        this.$message({
          message: "不可对管理员操作",
          type: "warning",
        });
      }
    },
    //拉黑
    getlahei(id, title, is_gly) {
      console.log(id, title, is_gly);
      if (is_gly == 0) {
        this.nsArr.push(id);
        // console.log(this.nsArr.indexOf(id), 12);
        const data_arr = {
          chat_id: this.chat_id,
          type: "lh",
          from_id: this.userId,
          title: title,
        };
        const msg_data = {
          account_id: id,
          lh_status: 1,
          name: title,
          contents: "拉黑",
        };
        data_arr["msg_json"] = JSON.stringify(msg_data);
        const data_str = JSON.stringify(data_arr);
        this.socket.send(data_str);
        setTimeout(() => {
          //获取直播间用户列表
          list_chatuser({
            md5key: localStorage.getItem("md5key"),
            chat_id: this.chat_id,
            titlel: this.title,
            page: this.page,
            page_size: this.page_size,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "直播间用户列表");
              this.tableData = res.retRes;
              this.retCounts1 = res.retCounts;
            } else {
              console.log("获取用户列表失败");
            }
          });
        }, 20);
      } else {
        this.$message({
          message: "不可对管理员操作",
          type: "warning",
        });
      }
    },
    //取消拉黑
    cellahei(id, title, is_gly) {
      console.log(id, title, is_gly);
      if (is_gly == 0) {
        this.nsArr.splice(this.nsArr.indexOf(id), 1);
        // console.log(this.nsArr.indexOf(id), 12);
        const data_arr = {
          chat_id: this.chat_id,
          type: "lh",
          from_id: this.userId,
          title: title,
        };
        const msg_data = {
          account_id: id,
          lh_status: 0,
          name: title,
          contents: "取消拉黑",
        };
        data_arr["msg_json"] = JSON.stringify(msg_data);
        const data_str = JSON.stringify(data_arr);
        this.socket.send(data_str);
        setTimeout(() => {
          //获取直播间用户列表
          list_chatuser({
            md5key: localStorage.getItem("md5key"),
            chat_id: this.chat_id,
            titlel: this.title,
            page: this.page,
            page_size: this.page_size,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "直播间用户列表");
              this.tableData = res.retRes;
              this.retCounts1 = res.retCounts;
            } else {
              console.log("获取用户列表失败");
            }
          });
        }, 20);
      } else {
        this.$message({
          message: "不可对管理员操作",
          type: "warning",
        });
      }
    },
    //用户分页
    handleSizeChange1(val) {
      console.log(`每页 ${val} 条`);
      this.page_size = val;
      //获取直播间用户列表
      list_chatuser({
        md5key: localStorage.getItem("md5key"),
        chat_id: this.chat_id,
        titlel: this.title,
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "直播间用户列表");
          this.tableData = res.retRes;
          this.retCounts1 = res.retCounts;
        } else {
          console.log("获取用户列表失败");
        }
      });
    },
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      //获取直播间用户列表
      list_chatuser({
        md5key: localStorage.getItem("md5key"),
        chat_id: this.chat_id,
        titlel: this.title,
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "直播间用户列表");
          this.tableData = res.retRes;
          this.retCounts1 = res.retCounts;
        } else {
          console.log("获取用户列表失败");
        }
      });
    },
    //通过消息审核
    tgXx(id) {
      console.log(id, "选择的消息id");
      const ids = [];
      ids.push(id);
      const data_arr = {
        chat_id: this.chat_id,
        type: "shmsg",
        from_id: this.userId,
        title: this.title,
      };
      const msg_data = {
        ids: ids,
        sh_status: 2,
      };
      data_arr["msg_json"] = JSON.stringify(msg_data);
      const data_str = JSON.stringify(data_arr);
      this.socket.send(data_str);
      //聊天室消息列表
      chatmsglists({
        md5key: localStorage.getItem("md5key"),
        chat_id: this.chat_id,
        contents: this.keyword,
        page: this.page2,
        page_size: this.page_size2,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "评论列表");
          this.msgLists = res.retRes;
          this.retCounts2 = res.retCounts;
        }
      });
    },
    //隐藏消息
    ycXx(id) {
      // console.log(id,"选择的消息id")
      const ids = [];
      ids.push(id);
      console.log(ids);
      const data_arr = {
        chat_id: this.chat_id,
        type: "shmsg",
        from_id: this.userId,
        title: this.title,
      };
      const msg_data = {
        ids: ids,
        sh_status: 3,
      };
      data_arr["msg_json"] = JSON.stringify(msg_data);
      const data_str = JSON.stringify(data_arr);
      this.socket.send(data_str);
      //聊天室消息列表
      chatmsglists({
        md5key: localStorage.getItem("md5key"),
        chat_id: this.chat_id,
        contents: this.keyword,
        page: this.page2,
        page_size: this.page_size2,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "评论列表");
          this.msgLists = res.retRes;
          this.retCounts2 = res.retCounts;
        }
      });
    },
    //评论分页
    handleSizeChange2(val) {
      console.log(`每页 ${val} 条`);
      this.page_size2 = val;
      //聊天室消息列表
      chatmsglists({
        md5key: localStorage.getItem("md5key"),
        chat_id: this.chat_id,
        contents: this.keyword,
        page: this.page2,
        page_size: this.page_size2,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "评论列表");
          this.msgLists = res.retRes;
          this.retCounts2 = res.retCounts;
        }
      });
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.page2 = val;
      this.idArr = [];
      this.valArr = [];
      //聊天室消息列表
      chatmsglists({
        md5key: localStorage.getItem("md5key"),
        chat_id: this.chat_id,
        contents: this.keyword,
        page: this.page2,
        page_size: this.page_size2,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "评论列表");
          this.msgLists = res.retRes;
          this.retCounts2 = res.retCounts;
        }
      });
    },
    //全选按钮切换
    allChose(e) {
      console.log(e, "全选的状态");
      this.idArr = [];
      if (e == true) {
        this.valArr = this.msgLists;
        this.valArr.forEach((item) => {
          this.idArr.push(item.id);
        });
        console.log(this.idArr);
      } else {
        this.valArr = [];
      }
    },
    //选择评论后
    valChanged(e) {
      // console.log(e)
      // console.log(this.valArr)
      if (this.valArr.length >= this.msgLists.length) {
        this.checkAll = true;
      }
      if (this.valArr.length < this.msgLists.length) {
        this.checkAll = false;
      }
      this.idArr = [];
      this.valArr.forEach((item) => {
        this.idArr.push(item.id);
      });
      console.log(this.idArr, "q2qweqe");
    },
    //批量删除
    allSc() {
      const data_arr = {
        chat_id: this.chat_id,
        type: "delmsg",
        from_id: this.userId,
        title: this.title,
      };
      const msg_data = {
        ids: this.idArr,
      };
      data_arr["msg_json"] = JSON.stringify(msg_data);
      const data_str = JSON.stringify(data_arr);
      this.socket.send(data_str);
      // this.idArr = [];//清空选中框
      this.valArr = []; //清空选中框
      this.checkAll = false; //取消全选框
      console.log(this.msgLists.length, "geshu");
      console.log(this.idArr.length);
      if (this.idArr.length >= this.msgLists.length) {
        //聊天室消息列表
        chatmsglists({
          md5key: localStorage.getItem("md5key"),
          chat_id: this.chat_id,
          contents: this.keyword,
          page: this.page2 - 1,
          page_size: this.page_size2,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "评论列表");
            this.msgLists = res.retRes;
            this.retCounts2 = res.retCounts;
          }
        });
      } else {
        //聊天室消息列表
        chatmsglists({
          md5key: localStorage.getItem("md5key"),
          chat_id: this.chat_id,
          contents: this.keyword,
          page: this.page2,
          page_size: this.page_size2,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "评论列表");
            this.msgLists = res.retRes;
            this.retCounts2 = res.retCounts;
          }
        });
      }
    },
    //批量通过
    allTg() {
      const data_arr = {
        chat_id: this.chat_id,
        type: "shmsg",
        from_id: this.userId,
        title: this.title,
      };
      const msg_data = {
        ids: this.idArr,
        sh_status: 2,
      };
      data_arr["msg_json"] = JSON.stringify(msg_data);
      const data_str = JSON.stringify(data_arr);
      this.socket.send(data_str);
      this.idArr = []; //清空选中框
      this.checkAll = false; //取消全选框
      //聊天室消息列表
      chatmsglists({
        md5key: localStorage.getItem("md5key"),
        chat_id: this.chat_id,
        contents: this.keyword,
        page: this.page2,
        page_size: this.page_size2,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "评论列表");
          this.msgLists = res.retRes;
          this.retCounts2 = res.retCounts;
        }
      });
    },
    //批量隐藏
    allYc() {
      const data_arr = {
        chat_id: this.chat_id,
        type: "shmsg",
        from_id: this.userId,
        title: this.title,
      };
      const msg_data = {
        ids: this.idArr,
        sh_status: 3,
      };
      data_arr["msg_json"] = JSON.stringify(msg_data);
      const data_str = JSON.stringify(data_arr);
      this.socket.send(data_str);
      this.idArr = []; //清空选中框
      this.checkAll = false; //取消全选框
      //聊天室消息列表
      chatmsglists({
        md5key: localStorage.getItem("md5key"),
        chat_id: this.chat_id,
        contents: this.keyword,
        page: this.page2,
        page_size: this.page_size2,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "评论列表");
          this.msgLists = res.retRes;
          this.retCounts2 = res.retCounts;
        }
      });
    },
  },
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579 ;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator{
  color: #626366;
}
</style>
<style>
/* 用于分页 */
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
.el-pagination__editor.el-input .el-input__inner {
  border-color: #ccc;
}
.page1 {
  width: 740px;
  margin: 0 auto;
  margin-top: 40px;
}
.el-pagination {
  text-align: center;
  /* margin: 20px 80px 20px 0; */
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #08a579 !important;
}
.el-pagination .el-select .el-input .el-input__inner:hover {
  border-color: #08a579 !important;
}
.el-select .el-input__inner:focus {
  border-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff;
}
.el-pager li:hover {
  color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff !important;
}
</style>
<style lang="less" scoped>
#container {
  background-color: #f0f2f5;
  .top {
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
    .bread {
      display: flex;
      margin: 20px auto;
      font-size: 14px;
      font-family: Microsoft YaHei;
      // font-weight: 400;
      color: #626366;
      line-height: 24px;

      .el-breadcrumb {
        font-size: 14px;
        line-height: 24px;
        /deep/.el-breadcrumb__item:last-child {
          .el-breadcrumb__inner {
            color: #08a579;
          }
        }
        /deep/.el-breadcrumb__inner.is-link {
          font-weight: normal;
        }
      }
    }
  }
  .content {
    margin: 0 auto;
    margin-bottom: 20px;
    width: 1200px;
    // height: 710px;
    background: #ffffff;
    border: 1px solid #dee0e3;
    .top {
      display: flex;
      margin: 30px 0px 40px 30px;
      span {
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 10px;
        width: 3px;
        height: 20px;
        background: #08a579;
        border-radius: 2px;
      }
      h3 {
        font-size: 20px;
      }
    }
    .header {
      display: flex;
      justify-content: space-between;
      margin-left: 30px;
      border-bottom: 1px solid #e6e6e6;
      .taps {
        display: flex;
        align-items: center;
        cursor: pointer;
        .tap {
          text-align: center;
          padding: 0 30px;
          h3 {
            font-size: 14px;
            color: #939599;
          }
          span {
            display: inline-block;
            width: 32px;
            height: 3px;
          }
        }
      }
      .choseTap {
        h3 {
          font-size: 16px;
          color: #333;
        }
        span {
          background: #08a579;
        }
      }
      .el-input {
        margin-right: 20px;
        width: 200px;
        /deep/.el-input__inner {
          border-radius: 16px;
        }
        /deep/.el-input__icon {
          position: relative;
          top: -2px;
        }
      }
      .nav {
        cursor: pointer;
        user-select: none;
        span {
          display: inline-block;
          text-align: center;
          padding-bottom: 15px;
          margin-right: 40px;
          padding-right: 20px;
        }
      }
      .nodingyue {
        font-size: 16px;
        span {
          padding-left: 20px;
          border-bottom: 3px solid #08a579;
        }
        .chose {
          border: 0;
          font-size: 14px;
          color: #939599;
        }
      }
      .dingyue {
        font-size: 14px;
        span {
          padding-left: 20px;
          border: 0;
          color: #939599;
        }
        .chose {
          color: #333;
          font-size: 16px;
          border-bottom: 3px solid #08a579;
        }
      }
    }
    .table {
      margin: 30px;
      width: 800px;
      border: 1px solid #dee0e3;
      /deep/.cell {
        text-align: center;
        font-size: 14px;
      }
      .username {
        display: flex;
        justify-content: center;
        font-size: 14px;
        font-weight: normal;
        color: #606266;
        .gly {
          display: inline-block;
          justify-self: flex-end;
        }
      }
      .dosome {
        display: flex;
        span {
          display: inline-block;
          margin: 0 20px;
          text-align: center;
          color: #fafafa;
          width: 50px;
          height: 24px;
          background: #cccccc;
          border-radius: 4px;
          cursor: pointer;
          user-select: none;
        }
        .clickThis {
          background: #1a9df5;
          color: #fff;
        }
        button {
          display: inline-block;
          margin: 0 20px;
          text-align: center;
          color: #fff;
          width: 50px;
          height: 24px;
          background: #1a9df5;
          border-radius: 4px;
          cursor: pointer;
          user-select: none;
          border: 0;
        }
      }
    }
    .comment {
      .dowhat {
        display: flex;
        align-items: center;
        margin: 20px 0 10px 45px;
        span {
          margin-left: 15px;
          width: 100px;
          height: 36px;
          border: 1px solid #b8b8b8;
          border-radius: 4px;
          color: #999999;
          font-size: 14px;
          text-align: center;
          line-height: 36px;
          cursor: pointer;
          user-select: none;
          i {
            position: relative;
            top: 1px;
            margin-right: 8px;
            font-size: 17px;
          }
        }
        span:hover {
          background-color: #1a9df5;
          color: #fff;
        }
      }
      .plLists {
        margin-left: 30px;
        width: 800px;
        border: 1px solid #dee0e3;
        .tableHeader {
          display: flex;
          padding-left: 32px;
          width: 768px;
          height: 40px;
          background: #fafafa;
          h4,
          span,
          p {
            line-height: 40px;
            font-size: 14px;
            color: #646566;
            font-weight: 600;
            text-align: center;
            user-select: none;
          }
          h4 {
            margin-left: 40px;
            width: 30px;
          }
          span {
            margin-left: 50px;
            width: 365px;
          }
          p {
            margin-left: 130px;
            width: 50px;
          }
        }
        .el-checkbox-group {
          display: flex;
          flex-direction: column;
          .el-checkbox {
            display: flex;
            align-items: center;
            // display: inline-block;
            line-height: 60px;
            width: 800px;
            min-height: 60px;
            border-top: 1px solid #dee0e3;
          }
          .el-checkbox:nth-child(2n) {
            background-color: #fafafa;
          }
          /deep/.el-checkbox__label {
            display: flex;
            align-items: center;
            padding-left: 0;
            width: 760px;
            h4 {
              display: inline-block;
              margin-left: 40px;
              width: 30px;
              text-align: center;
              font-weight: normal;
            }
            .msg {
              text-align: center;
              p {
                text-align: center;
                // margin-left: 50px;
                width: 365px;
                // text-align: center;
                overflow: hidden;
                display: -webkit-box; //将对象作为弹性伸缩盒子模型显示;
                text-overflow: ellipsis; //溢出部分用省略号代替
                -webkit-line-clamp: 2; //设置文本显示两行
                -webkit-box-orient: vertical; //从上到下排列子元素;
                white-space: normal;
              }
              img {
                object-fit: cover;
              }
            }
            .doSome {
              margin-left: 100px;
              span {
                margin-right: 10px;
                display: inline-block;
                // margin-left: 130px;
                text-align: center;
                width: 50px;
                height: 24px;
                font-size: 12px;
                line-height: 24px;
                color: #fff;
                background: #1a9df5;
                border-radius: 4px;
              }
            }
            .status {
              margin-left: 130px;
              span {
                display: inline-block;
                // margin-left: 130px;
                text-align: center;
                width: 50px;
                height: 24px;
                font-size: 12px;
                line-height: 24px;
                color: #fff;
                background: #cccccc;
                border-radius: 4px;
              }
            }
          }
          /deep/.el-checkbox__inner {
            margin-left: 16px;
            // width: 16px;
            // height: 16px;
          }
        }
      }
    }
    //fenye
    .page {
      width: 800px;
      margin-left: 60px;
      user-select: none;
    }
    .el-pagination {
      // text-align: right;
      margin: 20px 80px 20px 0;
    }
  }
}
</style>
